<template>
	<view class="city">
		<view class="input">
			<image mode="widthFix" src="@/static/image/search.png"></image>
			<input v-model="city" @blur="handleBlur" placeholder="请输入城市" />
		</view>
		<view class="title">
			热门城市
		</view>
		<view class="line-list">
			<view class="line" @click="handleClick(item)" :class="data == item.name&&'checked'" v-for="(item, index) in citys"
				:key="index">
				{{ item.name }}
			</view>
			<view class="i"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		data: {
			type: String,
			default: ''
		},
		citys: {
			type: Array,
			default: () => []
		}
	})
	const city = ref('')
	const emits = defineEmits(['change'])
	const handleBlur = () => {
		emits('change', city.value)
	}
	const handleClick = (val) => {
		city.value = ''
		emits('change', val.name)
	}
</script>

<style lang="scss" scoped>
	.input {
		display: flex;
		align-items: center;
		height: 80rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		padding: 0 30rpx;

		image {
			width: 26rpx;
			margin-right: 20rpx;
		}

		input {
			width: calc(100% - 46rpx);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			line-height: 33rpx;
		}
	}

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #2C1F21;
		line-height: 33rpx;
		margin: 20rpx 0;
	}

	.line-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.line {
			width: calc((100% - 40rpx) / 3);
			display: flex;
			align-items: center;
			justify-content: center;
			height: 64rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #A6A1A1;
			line-height: 33rpx;
			border: 1px solid #F6F6F6;
		}

		.checked {
			border: 2rpx solid #F1692B;
			background: #FFF7F4;
			color: #F1692B;
		}

		.i {
			width: calc((100% - 40rpx) / 3);
		}

		.line:nth-child(n+4) {
			margin-top: 20rpx;
		}
	}
</style>